<template>
  <div class="app-container">
    <div>
      <el-switch
        v-model="switchValue"
        @change="changeMode"
        active-text="设备号"
        inactive-text="矫正人员">
      </el-switch>
    </div>
    <div v-if="switchValue == false">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="userName"
            placeholder="请输入矫正人员名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>

        <div class="head-container scroll">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            show-checkbox
            @node-click="handleNodeClick"
            @check-change="handleNodeCheck"
          />
        </div>

      </el-col>
    </div>
    <div v-if="switchValue == true">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="termImei"
            placeholder="请输入设备Imei号"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>

        <div class="head-container scroll">
          <el-tree
            :data="termTree"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            show-checkbox
            @node-click="handleNodeClick"
            @check-change="handleNodeCheck"

          />
        </div>
      </el-col></div>
    <div id = 'container'></div>
  </div>

</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { treeselect } from "@/api/system/dept";
  import {selectCorrectionUserById, treeSelectCorrectionUser} from "@/api/system/correctionuser";
  import {getMark, initMap,removeMarker } from '../../../api/location/AMap'
  import {getUserPosition} from "@/api/location/position";
  import {listAttr} from '../../../api/terminal/attr'
  import log from "@/views/monitor/job/log";

  export default {
    name: "AMap",
    components: {Treeselect},
    data() {
      return {
        //开关切换
        switchValue: false,
        //地图标记
        markers: new Map(),
        ImeiMarker:new Map(),
        map: undefined,
        // 部门树选项
        deptOptions: undefined,
        // 部门名称
        userName: undefined,
        termImei: undefined,
        termTree: [{                       //设备树
          label: '全选',
          children: [],
        }],

        defaultProps: {
          children: "children",
          label: "label"
        },
        termOptionsProps:{
          label: "label"
        },

        queryParams: {
          lng: undefined,
          lat: undefined,
          heartBeats: undefined,
          time: undefined,
          name: undefined,
          phonenumber: undefined,
          locationName: undefined,
          locationTime: undefined,
          termImei: undefined,
        }
      }
    },

    methods: {
      getTermImei(){
        listAttr().then(value => {
          for(let i = 0; i < value.rows.length; i++){
            let temp = {label : value.rows[i].termImei}
            this.termTree[0].children.push(temp);
          }
        })
      },
      getPositionByImei(imei){
        getUserPosition(imei).then(res => {
          console.log(res)
          this.queryParams = this.$options.data.call().queryParams;
          this.queryParams.lng = res.data[res.data.length - 1].locationLng;
          this.queryParams.lat = res.data[res.data.length - 1].locationLat;
          this.queryParams.locationName = res.data[res.data.length - 1].locationName;
          this.queryParams.locationTime = res.data[res.data.length - 1].locationTime;
          this.queryParams.termImei = res.data[res.data.length - 1].termImei;

          getMark(this.map,this.queryParams).then(value => {
            this.markers.set(imei,value);
          })
          console.log(this.markers)
        });
      },
      getPosition(id, name) {
        selectCorrectionUserById(id, name).then(response => {
          console.log(typeof response.data.imei)
          this.queryParams.name = name;
          this.queryParams.phonenumber = response.data.phonenumber;
          getUserPosition(response.data.imei).then(res => {
            console.log(res)
            this.queryParams.lng = res.data[res.data.length - 1].locationLng;
            this.queryParams.lat = res.data[res.data.length - 1].locationLat;
            this.queryParams.locationName = res.data[res.data.length - 1].locationName;
            this.queryParams.locationTime = res.data[res.data.length - 1].locationTime;
            this.queryParams.termImei = res.data[res.data.length - 1].termImei;

            getMark(this.map,this.queryParams).then(value => {
              this.markers.set(id,value);
            })
            console.log(this.markers)
          });
        })

      },
      handleMarkerRemove(id){
        let marker = this.markers.get(id);
        removeMarker(marker,this.map);
      },
      getCorrectionUserTreeSelect() {
        treeSelectCorrectionUser().then(response => {
          this.deptOptions = response.data;
          console.log(response);
        })
      },
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(data) {
        //this.queryParams.deptId = data.id;
        //this.getList();
      },
      handleNodeCheck(data, checked) {
        if(data.label==="全选"){
          return;
        }
        if(this.switchValue == false){
          if (data.children != null) {
            return;
          }
          if (checked == true) {
            this.getPosition(data.id,data.label);
          }
          else if(checked == false){
            this.handleMarkerRemove(data.id)
          }
          //console.log(checkedTree);
        }
        else{
          if (checked == true) {
            this.getPositionByImei(data.label);
          }
          else if(checked == false){
            this.handleMarkerRemove(data.label)
          }
        }
      },
      changeMode(){
        this.map.clearMap();
      }

    },
    created() {
      this.getCorrectionUserTreeSelect();
      this.getTermImei();
      //this.getTreeselect();
      //console.log(init());;
      initMap().then(map => this.map = map);

    },
    watch:{
      // 根据名称筛选部门树
      userName(val) {
        this.$refs.tree.filter(val);
      },
      //根据imei号筛选设备
      termImei(val) {
        this.$refs.tree.filter(val);
      }
    }
  }
</script>

<style scoped>
  body,html {  width: 100%;  height: 100%;}

  .app-container{height: 100%}
  #container{
    width: 83%;
    /*height : calc(100vh - 120px);*/
    height: 84vh;
    margin:0;
    padding:0;

  }

  .scroll{
    height: 80vh;
    width: 100%;
    overflow: scroll;
  }


</style>
